<template>
  <div>
    <div class="testbox">
      <div class="box-1">
        <button @click="change">转换</button>
        <div id="jsoneditor" style="width: 100%; height: 400px"></div>
        <textarea v-model="a" />
      </div>
      <div class="box-1">
        <button @click="change2">转换</button>
        <div id="jsoneditor2" style="width: 100%; height: 400px"></div>
        <textarea v-model="b" />
      </div>
    </div>
  </div>
</template>
<script>
import RSA from "@/utils/RSA.JS";
import { ref } from "@vue/reactivity";
import { onMounted } from "vue";
import JSONEditor from "jsoneditor/dist/jsoneditor.min.js";
import "jsoneditor/dist/jsoneditor.min.css";

export default {
  setup() {
    const defaultSalt = `MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAInZuP1LYGbaqhmpDOC2TFIysE2o
VmS8LCsM5PzleMdwKXsRM4RpgT5CdeLvnLJQ2zjDw0Q0b28IAyxG3WFv1JGcKDvH3GMvLjdOBSph
+ImoYQAQ/2S+A/xStxEHMU/08xL+bdzXhnrwFGSHxfBDawFQhJA2tQYvQeb4s9gxLlilAgMBAAEC
gYB3rENT6l87i7PGaSNb5gcmCQlTscOm2lHB4gTdpF2RTsdEJu/BkVJ5eXscU4aGq3lVs2XOzXK8
Qol2o+LHFy3DHL/nx2knYvIoZ0Py4n6Rw3tZOq+eBs8b/JJ8quaVL3SViXNBaJcMig0lNds1rTfB
PpafS0mKZ5N7aR/MdTTZwQJBAN4HaCF8HSXaZ+c1AVF29PS6NUfwp28O/3OACMK7Vfc2DshVKfdU
PnpWembfsxMSz9bZiCIki7zFn1QP8YnYvhUCQQCe8Sbpe27+vfheKLJcWRWEqHedvKbPFajhgfGU
QQ/Tv/kAu69zy9urnbE9udOOZ6tlqfF2L8atcEsPXio0cmRRAkBWNdwJ/G4473gev2cWobD1gYQE
vf3VUqZ/y3wbWLBFgBj3UpIr9esYh5GZdkzLICfRjb+dOkGD99wowNQRqTYNAkEAgFGU5r8ed0+L
qwkUJnZNZxJTr+dUjK+h7p3oGZcFXiEIuMzN86DLspvXMkxKPhf4SlWPealMr02Pa9LMJBeOYQJA
ON+Mv+3fgC0JieCUcax5oHlkcGbMugWJfDZQ27pgvE70BFu82tR7sxcXw1kFvgm+9fBVgP2NtoJg
iOBV5MITzw==`;
    let a = ref("");
    let b = ref("");
    // eslint-disable-next-line no-unused-vars
    var editor = null;
    // eslint-disable-next-line no-unused-vars
    var editor2 = null;
    const change = () => {
      const prod = JSON.parse(a.value);
      const newObj = {};
      for (const i in prod) {
        newObj[i] = RSA.decodeByKey(prod[i], defaultSalt);
      }
      b.value = JSON.stringify(newObj);
      editor2.set(newObj);
    };
    const change2 = () => {
      const prod = JSON.parse(b.value);
      const newObj = {};
      for (const i in prod) {
        newObj[i] = RSA.encodeByKey(prod[i], defaultSalt);
      }
      a.value = JSON.stringify(newObj);
      editor.set(newObj);
    };
    const initEditor = (id) => {
      // create the editor
      const container = document.getElementById(id);
      const options = {
        mode: "tree",
        modes: ["code", "form", "text", "tree", "view", "preview"], // allowed modes
      };
      return new JSONEditor(container, options);
    };
    onMounted(() => {
      editor = initEditor("jsoneditor");
      editor2 = initEditor("jsoneditor2");
    });
    return {
      a,
      b,
      change,
      change2,
    };
  },
};
</script>
<style scoped>
.testbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.box-1 {
  width: 50%;
}
.box-1 textarea {
  height: 1000px;
  width: 100%;
  resize: none;
}
</style>
